<template>
	<view class="content fofa">
		<tabnav title="我的草稿箱" :col="back"></tabnav>
		<view class="wid100 dis disAl coFFF" style="height: 120rpx;" :style="{'background-color':back}">
			<view class="textCen" style="width: 50%;" @click="qiehuan(2)">
				<view :style="xuaze == 2?'color: #fff;':''">合同草稿箱</view>
				<view v-if="xuaze == 2" class="mar-top10 mar" style="width: 60rpx;height: 2rpx;background-color: #fff;"></view>
				<view v-if="xuaze != 2" class="mar-top10 mar" style="width: 60rpx;height: 2rpx;"></view>
			</view>
			<view class="textCen" style="width: 50%;" @click="qiehuan(1)">
				<view :style="xuaze == 1?'color: #fff;':''">模板草稿箱</view>
				<view v-if="xuaze == 1" class="mar-top10 mar" style="width: 60rpx;height: 2rpx;background-color: #fff;"></view>
				<view v-if="xuaze != 1" class="mar-top10 mar" style="width: 60rpx;height: 2rpx;"></view>
			</view>
		</view>
		<view class="wid100 bacFFF" style="height: 148rpx;">
			<view class="wid87 hei100 mar dis disAl disJuB">
				<view class="wid87 dis disAl borRad10" style="height: 71rpx;background-color: #F4F3F3;">
					<view class="dis disJuC" style="width: 13%;">
						<image :src="aurl+icon_list.sousuo" style="width: 31rpx;height: 31rpx;"></image>
					</view>
					<input class="wid87 " v-model="suosou" @input="suosouInput" placeholder="搜索合同名称/签署方姓名等"/>
				</view>
				<!-- <image :src="aurl+icon_list.shaixuan" style="width: 42rpx;height: 42rpx;"></image> -->
			</view>
		</view>
		<scroll-view :style="'height: calc(100vh - 148rpx - 120rpx - 90rpx - '+tops+'px);'" @refresherrefresh="onPulling" :refresher-triggered="triggered"
			scroll-y="true" class="scroll-Y" @scrolltolower="lower" :refresher-enabled="true">
			<view class="wid100" v-if="list.length == 0">
				<view class="wid100" style="height: 220rpx;"></view>
				<view class="wid100 textCen">
					<image :src="aurl+icon_list.wushuju" style="width: 306rpx;height: 200rpx;"></image>
					<view class="mar-top30 foSi25" style="color: #858585;">暂无草稿</view>
				</view>
			</view>
			<view v-for="(item,index) in list" :key="index" class="wid90 mar bacFFF borRad10 mar-top30">
				<view class="wid95 mar foSi25" @click="supplementTiaozhuan(item)">
					<view class="dis disAl disJuB hei60 foSi20">
						<view class="dis disAl">
							<view style="width: 6rpx;height: 40rpx;" :style="'background-color: '+backTwo+';'"></view>
							<view class="mar-left10">{{item.type == 1 ? item.content.sojson.templateName : item.content.flowName}}</view>
						</view>
						<view class="dis disAl">
							<view class="mar-left20" :style="'color: '+backTwo+';'">去发起</view>
							<uni-icons size="16" :color="backTwo" type="right"></uni-icons>
						</view>
					</view>
					<view class="wid90 mar">
						<view style="height: 20rpx;"></view>
						<view class="dis disAl">
							<view style="width: 25%;">合同名称：</view>
							<view>{{item.type == 1 ? item.content.sojson.templateName : item.content.flowName}}</view>
						</view>
						<view class="dis disAl mar-top20" v-if="item.type == 1">
							<view style="width: 25%;">发起方：</view>
							<view v-for="">{{item.content.sojson.creator}}</view>
						</view>
						<view class="dis disAl mar-top20" v-else>
							<view style="width: 25%;">发起方：</view>
							<view v-for="(its,ins) in item.content.flowApproverInfo">{{its.isPromoter == 0 ? its.approveName : ''}}</view>
						</view>
						<view class="" v-if="item.type == 1">
							
						<view v-for="(item1,index1) in item.content.sojson.recipients" :key="index" class="dis disAl mar-top20" >
							<view style="width: 25%;">签署方：</view>
							<view >{{item1.roleName}}</view>
						</view>
						</view>
						<view class="" v-else>
							
						<view v-for="(item2,index2) in item.content.flowApproverInfo" :key="index" class="dis disAl mar-top20">
							<view style="width: 25%;">签署方：</view>
							<view>{{item2.approveName}}</view>
							<!-- <view v-if="item1.isPromoter == 0">{{item1.approveName}}</view> -->
						</view>
						</view>
						<view style="height: 40rpx;"></view>
					</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				aurl:this.global.url,
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				xuaze: 1,
				suosou: '',
				// 判断是否还在继续输入
				timer: null,
				tops: 0,
				last_page: 0,
				page: 0,
				triggered: false,
				_freshing: false,
				list: [],
				icon_list:{
					shaixuan:'/addon/qianyu_dzq/wechatimg/shaixuan.png',
					sousuo:'/addon/qianyu_dzq/wechatimg/sousuo.png',
					wushuju:'/addon/qianyu_dzq/wechatimg/wushuju.png',
				}
			}
		},
		onLoad() {
			this.getList()
		},
		created() {
			var that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					that.tops = e.statusBarHeight
				}
			})
		},
		methods: {
			qiehuan(type){
				this.list = []
				this.page = 1
				this.xuaze = type
				this.getList()
				
			},
			supplementTiaozhuan(item){
				if(item.type == 1){
					uni.setStorageSync('contract_detail', item.content) // 由于链接里&等符号，所以存缓存读取
					uni.navigateTo({
						url: '/pages/login/zujian?caogao=1'
					});
				}else{
					uni.navigateTo({
						url: '/pages/index/file-initiate?file_contract_id='+item.content.fileids+'&file_name='+item.content.flowName
					});
				}
			},
			onPulling(e) {
				var that = this
				if (that._freshing) return;
				that._freshing = true;
				that.triggered = true
				console.log("onpulling", e);
				setTimeout(() => {
					that.triggered = false;
					that._freshing = false;
				}, 3000)
			},
			lower(e) {
				if(this.last_page > this.page){
					this.page++
					this.getList()
				}
			},
			tiaozhuan(url){
				uni.redirectTo({
					url: url
				});
			},
			getList(){
				var that = this
				console.log(that.xuaze)
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					url: that.global.url+'api/qianyu_dzq/applet_drafts_lists',
					method: 'POST',
					header:{'site-id':that.global.site_id,'token': uni.getStorageSync('inuse_userinfo_token')},
					data: {
						page: that.page,
						type: that.xuaze
					},
					success(res) {
					    let result = res.data
					    if(result.code == 1){
							var data = result.data
							that.last_page = data.last_page
							let shuju = data.data
							console.log('数据')
							console.log(shuju)
							for(var s = 0;s<shuju.length;s++){
								shuju[s].content = JSON.parse(shuju[s].content)
							}
							
							console.log('转换后的')
							console.log(shuju)
							// setTimeout(()=>{
							// 	that.list = shuju
							// },5000)
							that.list = shuju
							
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						that.triggered = false;
						that._freshing = false;
						uni.hideLoading()
					}
				})
			},
			suosouInput: function(event) {
				if (this.timer !== null) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.suosou = event.target.value
					this.page = 0
					console.log(this.suosou)
					// this.getList()
				}, 1000)
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F4F3F3;
	}
	.foSi28{
		font-size: 28rpx;
	}
	.xia{
		height: 1rpx;
		background: #BFBFBF;
	}
</style>
